/**
 * MenuPreview
 * @authors 杨兴洲（of2502）
 * @date    2017/5/31 0031 17:47
 * @version 1.0
 * @last-modify  杨兴洲（of2502）
 */

import React, {Component} from 'react';
import {findDOMNode} from 'react-dom';
import {Map, List, fromJS} from 'immutable'
import {Relax} from 'iflux2';
import {Button} from "antd";
import keyboard from "../../../style/imgs/keyboard.png";
import MenuItem from "./MenuItem";

import {DragDropContext} from 'react-dnd';
import HTML5Backend from 'react-dnd-html5-backend';

@DragDropContext(HTML5Backend)
@Relax
export default class MenuPreview extends Component {
    static defaultProps = {
        button: List(),
        selectedIndex: -1,
        selectedSubIndex: -1,
        selectItem: () => void 0,
        selectSubItem: () => void 0,
        addSubItem: () => void 0,
        addItem: () => void 0,
        moveSubItem: () => void 0,
        moveItem: () => void 0,
    };

    render() {
        const {button, addSubItem, addItem, selectedIndex, selectedSubIndex, moveSubItem, moveItem, selectItem, selectSubItem} = this.props;
        // console.log(selectedIndex, selectedSubIndex);


        const btnAddItem = (
            <div onClick={(e) => {
                e.stopPropagation();
                addItem();
            }} className="menu-button"><i className="qmIcon plus"></i></div>
        );

        return (
            <div>
                <div className="wx-menu-preview">
                    <div className="phone-header">
                        <span className="btn-back"><i className="qmIcon arrowLeft"></i>返回</span>
                        <h3>公众号</h3>
                    </div>
                    <div className="phone-footer">
                        <div className="keyboard">
                            <img className="icon" src={keyboard} alt=""/>
                        </div>
                        <div className="menu-box">
                            {
                                button.map((item, index) => {
                                    item = item.toObject();
                                    return (
                                        <MenuItem
                                            index={index}
                                            isActive={selectedIndex === index }
                                            data={item}
                                            subItems={item.sub_button}
                                            selectItem={selectItem}
                                            selectSubItem={selectSubItem}
                                            addSubItem={addSubItem}
                                            selectedSubIndex={selectedSubIndex}
                                            moveSubItem={moveSubItem}
                                            moveItem={moveItem}
                                        />
                                    );
                                })
                            }
                            {button.size < 3 && btnAddItem}
                        </div>
                    </div>
                </div>
                <div className="wx-menu-sort">
                    {/*<Button onClick={this.sortMenu}>菜单排序</Button>*/}
                    {/*<Button type="primary" >完成</Button>*/}
                </div>
            </div>
        )
    }

    sortMenu = (e) => {
        this.props.selectItem(-1);
    }
}